<template>
  <div>
    <div class="hello">
      <a href="javascript:void(0)" class="dayin"></a>
      <div class="time"> AM {{gettime}}</div>
      <a href="javascript:void(0)" class="shuaxin"></a>
      <div class="bg">
        <list></list>
      </div>
    </div>
    <div v-show="isShow" class="imgs">
    </div>
  </div>
  
</template>

<script>

import list from "@/components/List";
export default {
  name: 'demo',
  components:{
    list
  },
  data(){
    return{
      gettime:"",
      isShow:false,
    }
  },
  methods:{
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let hh = new Date().getHours();
      let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
      _this.gettime = hh +':'+ mf;
      console.log(_this.gettime)


    },
    IsShow(){
      let _this = this
      window.addEventListener('online',  function(){
        _this.isShow = false
      });
      window.addEventListener('offline', function(){
        _this.isShow = true
      });
    }


  },

  created() {
    this.IsShow()
    this.getCurrentTime()
  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.hello{
  position: relative;
}
.time{
  position: absolute;
  left: 48%;
  right: 0;
  top:20px ;
  color: #fff;
}
.dayin{
  width: 50px;
  height: 50px;
  position: absolute;
  left: 10px;
  top: 0;
  background: url("../assets/dayintubiao.png") no-repeat center / 100%;
}
.shuaxin{
  position: absolute;
  right: 10px;
  width: 50px;
  height: 50px;
  top: 0;
  background: url("../assets/refresh.png") no-repeat center / 100%;
}
.bg{
  width: 100vw;
  height: 100vh;
  background: url("../assets/bg.jpg") no-repeat center  / cover;
  display: flex;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
.imgs{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 999;
  background:  rgba(120,127,124,0.11) url("../assets/disconnected.png") no-repeat center / 50%;
}
</style>
